<template>
  <div v-if="pageflag" class="region-echarts">
    <Echart
      :options="regionOptions"
      id="regionChart"
      class="region-echarts_center"
    ></Echart>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
    };
  },
  created() {
    this.getData();
  },
  watch: {},
  computed: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getData() {
      let res = [
        {
          id: "6294d10c867e4d76834a58e9c460b2f1",
          name: "太仓红马机械设备制造有限公司",
          coordinate: "121.11082532753755,31.5746451969521",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 17,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "7d0fa6bd6c3b434e82a9959d6c943218",
          name: "裕克施乐塑料制品（太仓）有限公司",
          coordinate: "116.4133836971231,39.910924547299565",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 8,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "acaa5b08488b48bc9cfc9351e6130e6f",
          name: "太仓力达莱特精密工业有限公司",
          coordinate: "121.05015952254891,31.50965375326678",
          districtCode: "320585",
          districtName: "太仓市",
          deviceCount: 2,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "6761f7fbbae3459f97d28e46719f9848",
          name: "柿沼制冷（苏州）有限公司",
          coordinate: "120.7298897133152,31.3304431437088",
          districtCode: "320571",
          districtName: "苏州工业园区",
          deviceCount: 2,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
        {
          id: "c85908a5910a42fcb617ed5465806e2e",
          name: "无锡沃德汽车零部件有限公司",
          coordinate: "120.56010027022987,31.545099462884213",
          districtCode: "320205",
          districtName: "锡山区",
          deviceCount: 6,
          gatewayCount: null,
          paramCount: null,
          hasWarning: null,
        },
      ];
      this.pageflag = true;
      if (res.length > 0) {
        const newData = [];
        const dataObj = res
          .map((item) => item.districtName)
          .reduce(function (prev, next) {
            prev[next] = prev[next] + 1 || 1;
            return prev;
          }, {});
        for (const key in dataObj) {
          const obj = {
            name: key,
            value: dataObj[key],
          };
          newData.push(obj);
        }
        this.init(newData);
      }
    },
    init(newData) {
      // 区域分布
      this.regionOptions = {
        color: ["#2648B2", "#8F64FF", "#26A5E4", "#9660D3", "#27BFED"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: "80%",
            data: newData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.region-echarts {
  width: 100%;
  height: 100% !important;

  .region-echarts_center {
    width: 100%;
    height: 100%;
  }
}
</style>
